<!--
 * @Author: your name
 * @Date: 2021-08-25 15:18:51
 * @LastEditTime: 2021-08-25 15:18:51
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \bigdate\src\views\others\404.vue
-->
<template>
  <Row :gutter="[11, 11]">
    <Col :md="{ span: 24 }" :xs="{ span: 24 }" :lg="{ span: 24 }">
      <VServiceInfo title="服务器信息" :time="times" :datas="infodata" :isLoad="load"></VServiceInfo>
    </Col>
    <Col :md="{ span: 24 }" :xs="{ span: 24 }" :lg="{ span: 8 }">
      <VServiceEchart :datas="obj1" title="运行内存" :time="times" :isLoad="load"></VServiceEchart>
    </Col>
    <Col :md="{ span: 24 }" :xs="{ span: 24 }" :lg="{ span: 8 }">
      <VServiceEchart :datas="obj3" title="内存使用" :time="times" :isLoad="load"></VServiceEchart>
    </Col>
    <Col :md="{ span: 24 }" :xs="{ span: 24 }" :lg="{ span: 8 }">
      <VServiceEchart :datas="obj2" title="CPU使用" :time="times" :isLoad="load"></VServiceEchart>
    </Col>
  </Row>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';
import { Card, Row, Col } from 'ant-design-vue';
import { momentTime } from '@/ntils/hooks';
import { serviceInfoGet } from '@/api/admin/planuser/Servicemonitoring';
import VServiceEchart from './components/serverEchart.vue';
import VServiceInfo from './components/serviceInfo.vue';
import { pieEchart, Speedometer, Dashboard } from './config/echartConfig';
export default defineComponent({
  name: 'serviceEch',
  components: {
    Card,
    Row,
    Col,
    VServiceEchart,
    VServiceInfo
  },
  setup() {
    const times = momentTime('YYYY-MM-DD');
    const obj1 = ref();
    const obj2 = ref();
    const obj3 = ref();
    const load = ref();
    const infodata = ref();
    load.value = true;
    serviceInfoGet().then(res => {
      let datas = res.data;
      obj1.value = pieEchart([
        { name: `使用${datas.usedMem}`, value: datas.usedMem.replace('G', '') },
        { name: `剩余${datas.freeMem}`, value: datas.freeMem.replace('G', '') }
      ]);
      obj2.value = Speedometer(datas.cpuUsage.replace('%', ''));
      infodata.value = {
        hostName: datas.hostName,
        cpuCores: datas.cpuCores,
        Ip: datas.Ip,
        type: datas.type,
        totalMem: datas.totalMem
      };
      obj3.value = Dashboard(datas.MemUsage.replace('%', ''));
      load.value = false;
      console.log(datas);
    });
    return {
      obj1,
      obj2,
      obj3,
      load,
      times,
      infodata
    };
  }
});
</script>

<style lang="less" scoped>
.empty {
  display: flex;
  flex-direction: column;
  & > div:nth-of-type(1) {
    font-size: 36px;
    font-weight: bold;
    & ~ div {
      font-size: 23px;
      margin-top: 10px;
    }
  }
}
</style>
